<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片缩放功能</title>
    <!-- 引入 Vue.js 库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.prod.js"></script>
</head>
<body>
    <div id="app">
        <!-- 放大按钮，点击触发 zoom 方法，放大 10% -->
        <button @click="zoom(true)">放大 10%</button>
        <!-- 缩小按钮，点击触发 zoom 方法，缩小 10% -->
        <button @click="zoom(false)">缩小 10%</button>
        <!-- 绑定图片宽度，图片路径和替代文本 -->
        <img :width="width" src="img/t03.jpg" alt="示例图片">
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    // 图片初始宽度
                    width: 200
                };
            },
            methods: {
                zoom(isZoomIn) {
                    // 定义缩放比例
                    const scale = 0.1;
                    if (isZoomIn) {
                        // 放大操作
                        this.width = this.width * (1 + scale);
                    } else {
                        // 缩小操作，确保缩小后的宽度不小于 10
                        this.width = Math.max(this.width * (1 - scale), 10);
                    }
                }
            }
        });
        // 挂载 Vue 应用到指定的 DOM 元素
        app.mount('#app');
    </script>
</body>
</html>